<template>
    <div class='list'>
                        

  <div class="item" v-for="item in shop" :key="item.id" @click='gogo(item.id)'>
            <img :src="item.fresh_url" alt="">     
            <div class='text'>   
                 <h1>{{ item.title }}</h1>          
                <p class='price'>
                    <span>￥{{ item.sell_price }}</span>
                    <span>￥{{ item.market_price }}</span>
                </p>
                <p class='sell'>
                    <span>热卖中</span>
                    <span>剩余{{ item.stock_quantity }}件</span>
                </p>
            </div>
            </div>            

<mt-button type='danger' size='large' @click='showmore'>加载更多</mt-button>

    </div>
   

  
</template>

<script>
    export default{
        data(){
            return{
                pageindex:1,
                shop:[]
                
            }
        },
        created() {
            this.showdata()
        },
        methods:{
            showdata(){
                   this.$http.get('api/getgoods?pageindex'+this.pageindex).then(data=>{
                       if(data.body.status===0){
                           data.body.message.forEach(item => {
                               item.fresh_url='http://img4.imgtn.bdimg.com/it/u=1535496529,2217202527&fm=26&gp=0.jpg'
                           });
                            this.shop=this.shop.concat(data.body.message)  
                         
                       }
                         
                   })
            },
            showmore(){
                    this.pageindex++
                    this.showdata()
            },
            gogo(id){
            //    this.$router.push('/shopping/shoppingone/:id')
               this.$router.push({name:'shoppingone',params:{id:id}})
            }
        }
    }
</script>

<style lang="less" scoped>
.list{
display: flex;
flex-wrap: wrap;
padding: 4px 4px 0px 4px;
justify-content: space-between;
.item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 49%;
    border: 1px solid #ccc;
    box-shadow: 0 0 6px #ccc;
    padding: 2px;
    margin: 3px 0; 
    min-height: 293px;
    img{
    width: 100%;
    }

    .text{
    margin: 3px 1px 0 1px;
    background-color:#eee;   
    h1{
    font-size:16px; 
        }

    .price{
    span:nth-child(2){
    font-size: 12px;
    text-decoration: line-through; 
    margin-left: 20px;     
    }
    span:nth-child(1){
    font-size: 14px;
    color: red
            }
        }

    .sell{
    display: flex;
    justify-content: space-between;
    span{        
            }
        }
    }
}
}

</style>
